<!-- 搜索表单 -->
<template>
  <ele-card :body-style="{ paddingBottom: '2px' }">
    <el-form label-width="72px" @keyup.enter="search" @submit.prevent="">
      <el-row :gutter="8">
        <el-col :lg="6" :md="12" :sm="12" :xs="24">
          <el-form-item label="姓名">
            <el-input
              clearable
              v-model.trim="form.name"
              placeholder="请输入姓名"
              @keyup.enter.native="search"
            />
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="12" :sm="12" :xs="24">
          <el-form-item label="学号">
            <el-input
              clearable
              v-model.trim="form.code"
              placeholder="请输入学号"
              @keyup.enter.native="search"
            />
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="12" :sm="12" :xs="24">
          <el-form-item label="毕业年份">
            <el-select
              v-model="form.graduationYear"
              multiple
              collapse-tags
              clearable
              style="margin-left: 0"
              placeholder="请选择毕业年份"
            >
              <el-option
                v-for="item in graduationYearOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="12" :sm="12" :xs="24" v-show="showSearchParams">
          <el-form-item label="校区">
            <dict-data
              code="campus"
              v-model="form.campus"
              placeholder="请选择学生所属校区"
              multiple
              collapse-tags
            />
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="12" :sm="12" :xs="24" v-show="showSearchParams">
          <el-form-item label="年级">
            <el-select
              v-model="form.grade"
              multiple
              collapse-tags
              clearable
              style="width: 100%"
              placeholder="请选择学生年级"
            >
              <el-option
                v-for="item in gradeOptions"
                :key="item.value"
                :label="item.label + '年'"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="12" :sm="12" :xs="24" v-show="showSearchParams">
          <el-form-item label="系别">
            <el-select
              v-model="form.department"
              multiple
              collapse-tags
              clearable
              filterable
              style="width: 100%"
              placeholder="请选择系别"
            >
              <el-option
                v-for="item in departmentOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="12" :sm="12" :xs="24" v-show="showSearchParams">
          <el-form-item label="专业">
            <el-select
              v-model="form.major"
              multiple
              collapse-tags
              clearable
              filterable
              style="width: 100%"
              class="autoWidth-select"
              placeholder="请选择专业"
            >
              <el-option
                v-for="item in majorOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="12" :sm="12" :xs="24" v-show="showSearchParams">
          <el-form-item label="困难类别">
            <el-select
              v-model="form.difficulty"
              clearable
              filterable
              style="margin-left: 0px; width: 100%"
              placeholder="请选择困难类型"
            >
              <el-option
                v-for="item in difficultyOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="12" :sm="12" :xs="24">
          <el-form-item label-width="16px">
            <el-button type="primary" @click="search">查询</el-button>
            <el-button @click="reset">重置</el-button>
            &nbsp;&nbsp;<el-link
              @click="showSearchParams = !showSearchParams"
              type="success"
              class="showOrHid"
              :icon="
                showSearchParams ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
              "
            >
              显隐选项
            </el-link>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </ele-card>
</template>

<script setup>
  import { useFormData } from '@/utils/use-form-data';
  import { ref } from 'vue';
  import {
    getGraduationYear,
    getCampus,
    getStudyStatus,
    getDepartment,
    getMajor,
    getGrade,
    getDifficulty
  } from '@/api/manage/statistic/admin/studentInfo/index.js';
  import { selectCurrentYear } from '@/api/manage/statistic/admin/schoolInfo/index.js';
  import { getUser } from '@/api/manage/statistic/admin/studentInfo/index.js';

  const emit = defineEmits(['search']);

  const showSearchParams = ref(false);

  /** 表单数据 */
  const [form, resetFields] = useFormData({
    // name: '',
    // code: '',
    // sex: '',
    // nation: '',
    // political: '',
    // campus: '',
    // grade: '',
    // department: '',
    // major: '',
    // majorDirection: '',
    // studyTime: '',
    // studyState: '',
    // counsellorCode: '',
    // graduationYear: '',
    // organization: '',
    // difficulty: ''
    name: null, //姓名
    code: null, //学号
    campus: null, //校区
    grade: null, //年级
    department: null, //系别
    major: null, //专业
    counsellorCode: null, //辅导员工号
    graduationYear: [], //毕业年份
    studyState: null //学籍
  });

  /** 搜索 */
  const search = () => {
    emit('search', { ...form });
  };

  /**  重置 */
  const reset = () => {
    resetFields();
    form.graduationYear.push(currentYear.value);
    search();
  };

  /**
   * 获取毕业年份列表
   * @type {Ref<UnwrapRef<*[]>, UnwrapRef<*[]> | *[]>}
   */
  const graduationYearOptions = ref([]);
  const selectGraduationYear = () => {
    getGraduationYear().then((res) => {
      graduationYearOptions.value = res.data;
    });
  };

  selectGraduationYear();
  ////////////////////////////////////////////////////////

  //获取当前毕业年份
  const currentYear = ref('');
  const getCurrentYear = () => {
    selectCurrentYear().then((res) => {
      currentYear.value = res;
      form.graduationYear.push(currentYear.value);
      search();
    });
  };
  getCurrentYear();

  /**
   * 获取用户列表
   * @type {Ref<UnwrapRef<*[]>, UnwrapRef<*[]> | *[]>}
   */
  // const counsellorOptions = ref([]);
  // const selectCounsellors = () => {
  //   getCounsellors().then(res => {
  //     counsellorOptions.value = res.data;
  //   });
  // }
  // selectCounsellors();
  ////////////////////////////////////////////////////////

  /**
   * 获取校区列表
   * @type {Ref<UnwrapRef<*[]>, UnwrapRef<*[]> | *[]>}
   */
  const campusOptions = ref([]);
  const selectCampus = () => {
    getCampus().then((res) => {
      campusOptions.value = res.data;
    });
  };
  selectCampus();
  ////////////////////////////////////////////////////////

  /**
   * 获取学籍列表
   * @type {Ref<UnwrapRef<*[]>, UnwrapRef<*[]> | *[]>}
   */
  const studyOptions = ref([]);
  const selectStudyStatus = () => {
    getStudyStatus().then((res) => {
      studyOptions.value = res.data;
    });
  };
  selectStudyStatus();
  ////////////////////////////////////////////////////////

  const departmentOptions = ref([]);
  const selectDepartment = () => {
    getDepartment().then((res) => {
      departmentOptions.value = res.data;
    });
  };
  selectDepartment();

  const majorOptions = ref([]);
  const selectMajor = () => {
    getMajor().then((res) => {
      majorOptions.value = res.data;
    });
  };
  selectMajor();

  const gradeOptions = ref([]);
  const selectGrade = () => {
    getGrade().then((res) => {
      gradeOptions.value = res.data;
    });
  };
  selectGrade();

  const userOptions = ref([]);
  const selectUser = () => {
    getUser().then((response) => {
      userOptions.value = response.data;
    });
  };
  selectUser();

  /**
   * 查询困难类别
   * @type {Ref<UnwrapRef<*[]>, UnwrapRef<*[]> | *[]>}
   */
  const difficultyOptions = ref([]);
  const selectDifficulty = () => {
    getDifficulty().then((response) => {
      difficultyOptions.value = response.data;
    });
  };
  selectDifficulty();
  ////////////////////////////////////////////////////////
</script>
